<template>
	<s-page custom-class="Popup-Page">
		<view class="container">
			<view class="paper">
				<view class="paper-title flex-column flex-center-center">
					<text style="font-weight: bold; color: #109EF8;">{{uniqueNo}}房</text>
					<text style="font-weight: bold;font-size: 28rpx; transform: scale(0.75);">总费用(元) : <text
							style="font-weight: bold; font-size: 50rpx; color: #FF0000;">￥ {{payFee}}</text></text>
				</view>
				<view class="paper-main">
					<view class="old-meter flex-column flex-center-center">
						<view class="hr">
							上月抄表数
						</view>
						<text
							style=" font-weight: bold;color:#AEAEAE;font-size: 28rpx; transform: scale(0.75);">时间:<text>{{BeforePrices.meterReadingTime}}</text></text>
						<view class="old-meter-value">
							<view v-if="types=='01'" class="value-li">
								<view class="value-header">
									<text class="font-tenpx">生活用水读数：</text>
								</view>
								<view class="value-value">
									<text>{{BeforePrices.presentNum}}</text>
								</view>
								<view class="value-value" v-if="BeforePrices.presentNum==null">
									<text>无</text>
								</view>
							</view>
							<view v-if="types=='02'" class="value-li">
								<view class="value-header">
									<text class="font-tenpx">太阳能读数：</text>
								</view>
								<view class="value-value">
									<text>{{BeforePrices.presentNum}}</text>
								</view>
								<view class="value-value" v-if="BeforePrices.presentNum==null">
									<text>无</text>
								</view>
							</view>
							<view v-if="types=='03'" class="value-li">
								<view class="value-header">
									<text class="font-tenpx">电表读数：</text>
								</view>
								<view class="value-value">
									<text>{{BeforePrices.presentNum}}</text>
								</view>
								<view class="value-value" v-if="BeforePrices.presentNum==null">
									<text>无</text>
								</view>
							</view>
							<view v-if="types=='04'" class="value-li">
								<view class="value-header">
									<text class="font-tenpx">燃气读数：</text>
								</view>
								<view class="value-value">
									<text>{{BeforePrices.presentNum}}</text>
								</view>
								<view class="value-value" v-if="BeforePrices.presentNum==null">
									<text>无</text>
								</view>
							</view>
							<view v-if="types=='05'" class="value-li">
								<view class="value-header">
									<text class="font-tenpx">宽带费用：</text>
								</view>
								<view class="value-value">
									<text>{{BeforePrices.presentNum}}</text>
								</view>
								<view class="value-value" v-if="BeforePrices.presentNum==null">
									<text>无</text>
								</view>
							</view>
						</view>
					</view>
					<view class="now-meter flex-column flex-center-center">
						<view class="hr">
							本次抄表数
						</view>
						<text
							style="font-weight: bold;color:#AEAEAE;font-size: 28rpx; transform: scale(0.75);">时间:<text>{{rTime}}</text></text>
						<view class="now-meter-main">

							<view class="now-meter-value">
								<view v-if="types=='01'" class="value-li">
									<view class="value-header">
										<text class="font-tenpx">生活用水读数：</text>
									</view>
									<view class="value-value">
										<text>{{degrees}}</text>
										<!-- <text>4567</text> -->
									</view>
								</view>
								<view v-if="types=='02'" class="value-li">
									<view class="value-header">
										<text class="font-tenpx">太阳能用水读数：</text>
									</view>
									<view class="value-value">
										<text>{{degrees}}</text>
									</view>
								</view>
								<view v-if="types=='05'" class="value-li">
									<view class="value-header">
										<text class="font-tenpx">宽带费用：</text>
									</view>
									<view class="value-value">
										<text>{{degrees}}</text>
									</view>
								</view>
								<view v-if="types=='03'" class="value-li">
									<view class="value-header">
										<text class="font-tenpx">电表读数：</text>
									</view>
									<view class="value-value">
										<text>{{degrees}}</text>
									</view>
								</view>
								<view v-if="types=='04'" class="value-li">
									<view class="value-header">
										<text class="font-tenpx">燃气读数：</text>
									</view>
									<view class="value-value">
										<text>{{degrees}}</text>
									</view>
								</view>
							</view>
							<view class="now-meter-pay">
								<view v-if="types=='01'" class="value-li">
									<view class="value-header">
										<text class="font-tenpx">应缴水费：</text>
									</view>
									<view class="value-value">
										<text>{{payFee}}</text>
									</view>
								</view>
								<view v-if="types=='02'" class="value-li">
									<view class="value-header">
										<text class="font-tenpx">应缴水费：</text>
									</view>
									<view class="value-value">
										<text>{{payFee}}</text>
									</view>
								</view>
								<view v-if="types=='05'" class="value-li">
									<view class="value-header">
										<text class="font-tenpx">应缴网费：</text>
									</view>
									<view class="value-value">
										<text>{{payFee}}</text>
									</view>
								</view>
								<view v-if="types=='03'" class="value-li">
									<view class="value-header">
										<text class="font-tenpx">应缴电费：</text>
									</view>
									<view class="value-value">
										<text>{{payFee}}</text>
									</view>
								</view>
								<view v-if="types=='04'" class="value-li">
									<view class="value-header">
										<text class="font-tenpx">应缴燃气费：</text>
									</view>
									<view class="value-value">
										<text>{{payFee}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="paper-footer">
					<text style="color: #109EF8;font-weight: bold;">截止时间：{{dTime}}</text>
				</view>
			</view>
			<button v-if="closebtnshow" class="sub_button" @tap="toIndex()">关闭</button>
			<s-popup v-model="bottomVisible" position="bottom" background="#fff" height="200">
				<view style="width: 100%;height: 200rpx; display: flex;justify-content: center;align-items: center;">
					<text style="color: #DD6161;">系统出现未可预期的故障，请联系系统运维人员进行处理</text>
				</view>
			</s-popup>

		</view>
	</s-page>
	<!-- 系统出现未可预期的故障，请联系系统运维人员进行处理 -->
</template>

<script>
	import Dialog from '@/uni_modules/s-ui/utils/dialog';
	export default {
		data() {
			return {
				BFN: '',
				BeforePrices: [{
					uniqueNo: '',
					version: '',
				}],
				// 费用配置
				// 总费用
				total: '',
				versionConfig: [],
				// 应缴费用
				paywater: '',
				payele: '',
				paygas: '',
				// 本次抄表
				NowdomesticWaterUnitPrice: '', //生活用水费用
				NowsolarWaterUnitPrice: '', //太阳能用水费用
				NoweleUnitPrice: '', //电费单价
				NowgasUnitPrice: '', //燃气费单价
				NowbroadbandFee: '', //宽带费
				title: '',
				meterReadingMonth: '', //抄表年月
				kd: '',
				feeConfigId: '',
				closebtnshow: false,

				bottomVisible: false, //底部弹出
				types: '',
				degrees: '', //度数
				price: '', //单价
				payFee: '', //应缴费用
			}
		},
		onLoad(options) {
			console.log( '上个页面传递过来的参数：',options)
			this.degrees = options.degrees
			this.uniqueNo = options.uniqueNo
			this.version = options.version
			this.rTime = options.meterReadingTime
			this.dTime = options.deadline
			this.title = options.title
			this.meterReadingMonth = options.titleM
			this.kd = options.broadbandFee
			this.types = options.types
			this.BFN = options.BFN
			// this.getVersion(options)
			this.getBefore(options)
			// this.getVersion(options)
		},
		methods: {
			toReadingIndex() {
				uni.navigateTo({
					url: '/pages/meterCheck/index'
				})
			},
			//上月费用
			async getBefore(options) {
				console.log("options.uniqueNo:", options.uniqueNo)
				console.log("options.types", options.types)
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-operate/settlement/uniqueNo/' + options.uniqueNo + '/type/' + options.types,
						method: "get",
					})
				console.log("res:", res)
				if (res.success == true) {
					this.BeforePrices = res.body.settlement
					this.getVersion(options)
					console.log("BeforePrices666：", this.BeforePrices)
				} else {
					// console.log("空666")
					this.BeforePrices.presentNum = this.BFN
				}
				console.log("this.BFN：", this.BFN)
			},
			async getVersion(options) {

				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-operate/config/?version=' + options.version,
						method: "get",
					})
					console.log("res",res)
				console.log("version----" + res.body.configs.data[0].version)
				this.versionConfig = res.body.configs.data[0]
				this.feeConfigId = this.versionConfig.id
				var prices = ''
				console.log("this.versionConfig:", this.versionConfig)
				if (this.types == "01") {
					//[获取配置的 ===日用水收费标准]
					prices = this.versionConfig.domesticWaterUnitPrice
				} else if (this.types == "02") {
					//[获取配置的 ===太阳能收费标准]
					prices = this.versionConfig.solarWaterUnitPrice
				} else if (this.types == "03") {
					//[获取配置的 ===电费收费标准]
					prices = this.versionConfig.eleUnitPrice
				} else if (this.types == "04") {
					//[获取配置的 ===燃气收费标准]
					prices = this.versionConfig.gasUnitPrice
				}
				this.price = prices
				console.log("单价：",this.price)
				console.log("读数：",this.degrees)
				this.payFee = Number(this.degrees) * Number(this.price)
				console.log("总价：",this.payFee)
				setTimeout(() => {
					this.settlementSave()
				}, 1400)
				setTimeout(() => {
					this.closebtnshow = true
				}, 1500)
			},

			//保存
			async settlementSave() {

				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-operate/settlement/save/',
						method: "post",
						data: {
							beforeNum: 0,
							deadline: this.dTime,
							feeConfigId: this.feeConfigId,
							id: '',
							meterReadingMonth: this.meterReadingMonth,
							meterReadingTime: this.rTime,
							payFee: this.payFee,
							presentNum: this.degrees,
							price: this.price,
							remark: '',
							titleName: this.title,
							type: this.types,
							uniqueNo: this.uniqueNo,
							version: this.version
						}
					})
				// console.log(this.BeforePrices[0].presentDomesticWaterNum)
				console.log("抄表信息：", res)
				if (res.success == true && res.code== 100) {
					console.log(res.msg)
					console.log("成功提示：", this.title)
					uni.showToast({
						title: "操作成功"
					})
					// this.closebtnshow = true
				} else {
					if (res.code == 101) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					} else {
						console.log("失败信息：" + res.msg)
						uni.showToast({
							title: "操作失败"
						})
					}
				}
				// this.closebtnshow = false
			},
			toIndex() {
				// uni.navigateBack({

				// })
				uni.navigateTo({
					url: '/pages/meterCheck/index' //返回列表页
				})
				// uni.reLaunch({
				// 	url: '/pages/index/index'
				// })
			}

		}
	}
</script>

<style lang="less">
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.flex-center-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.paper {
		width: 668rpx;
		height: 760rpx;
		margin-top: 20rpx;
		// border: 1px solid #000000;
		background: url(/static/image/paper@2x.png) no-repeat;
		background-size: 100% 100%;
		position: relative;

		.paper-title {
			margin: 52rpx 0 40rpx 0;
			// height: 100px;
		}
	}

	.old-meter {
		width: 100%;
		position: relative;

		.hr {
			width: 150rpx;
			text-align: center;
			margin-bottom: 16rpx;
			font-size: 24rpx;
			font-weight: bold;
			// background: #1707ff;
			position: relative;
		}
	}

	.now-meter {
		width: 100%;
		margin-top: 20rpx;
		position: relative;

		.hr {
			width: 150rpx;
			text-align: center;
			margin-bottom: 16rpx;
			font-size: 24rpx;
			font-weight: bold;
			// background: #1707ff;
			position: relative;
		}
	}

	.hr::after {
		content: "";
		width: 240rpx;
		height: 1px;
		background-color: #C2C2C2;
		position: absolute;
		top: 16rpx;
		left: 150rpx;
	}

	.hr::before {
		content: "";
		width: 240rpx;
		height: 1px;
		background-color: #C2C2C2;
		position: absolute;
		right: 150rpx;
		top: 16rpx;
	}

	.now-meter-main {
		width: 100%;
		margin-top: 10rpx;
		display: flex;
	}

	.old-meter-value {
		width: 94%;
		margin-top: 10rpx;

		.value-li {
			display: flex;
			width: 100%;
			height: 50rpx;

			.value-header {
				width: 190rpx;
				font-size: 26rpx;
				transform: scale(0.90);
			}
		}

		.value-value {
			font-size: 24rpx;
			// font-weight: bold;
		}
	}

	.now-meter-value {
		width: 58%;
		// border: 1px solid #F0AD4E;

		.value-li {
			display: flex;
			width: 100%;
			height: 50rpx;
			align-items: center;
			margin: 0 0rpx 0 18rpx;

			.value-header {
				width: 190rpx;
				font-size: 26rpx;
				transform: scale(0.90);
			}
		}

		.value-value {
			font-size: 26rpx;
			transform: scale(0.90);
		}
	}

	.now-meter-pay {
		width: 48%;
		// border: 1px solid #5555ff;

		.value-li {
			display: flex;
			width: 100%;
			height: 50rpx;
			align-items: center;

			.value-header {
				width: 190rpx;
				font-size: 26rpx;
				transform: scale(0.90);
			}
		}

		.value-value {
			font-size: 26rpx;
			transform: scale(0.90);
		}
	}

	.paper-footer {
		width: 100%;
		font-size: 28rpx;
		text-align: center;
		position: absolute;
		bottom: 75rpx;
	}
</style>
